<template>
	<view class="base-modal flex-col align-center">
		<u-popup :show="show" mode='center' bgColor='transparent' :round="round" @close="close" @open="open">

			<view class="modal-img-box justify-center align-center">
				<image class="modal-img" :src="src" mode=""></image>
				<view class="title">
					{{title}}
				</view>
				<view class="btn-all justify-around align-center">
					<view class="btn-l justify-center align-center" @tap="cancel">
						取消
					</view>
					<view class="btn-r justify-center align-center" @tap="succee">
						确定
					</view>
				</view>
			</view>

		</u-popup>
	</view>
</template>

<script>
	/**
	 *
	 * @description 顶部导航栏
	 * slot:
	 * 		left-slot:左侧插槽
	 * @property {String} 			bgColor				顶部导航栏颜色;默认值：#FFF
	 *   */
	export default {

		name: "base-modal",
		props: {
			show: {
				type: [Boolean, String],
				default: false
			},
			round: {
				type: String,
				default: '30'
			},
			src: {
				type: String,
				default:''
				// default:$config.imgDomain+ '/static/images/homes/modal1.png'
			},
			title: {
				type: String,
				default: '确定要把餐券赠送他人吗'
			},
		},
		data() {
			return {

			}
		},
		methods: {
			open() {
				this.show = true
				// console.log('open');
			},
			close(){
				
			},
			cancel() {
				// this.show = false
				this.$emit('cancel', false)
				// console.log('close');
			},
			succee() {
				this.$emit('succee', false)
			}
		}
	}
</script>
<style lang="scss">
	@import '/pages/home/common.css';
</style>
<style lang="scss" scoped>
	.base-modal {
		.modal-img-box {
			// border: 1px solid red;
			position: relative;
			width: calc(100vw - 120rpx);
			height: 873rpx;

			.title {
				position: absolute;
				bottom: 160rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
			}

			.btn-all {

				border-top: 1rpx solid rgba(0, 0, 0, 0.12);
				width: 100%;
				height: 104rpx;
				position: absolute;
				bottom: 0;
				font-size: 32rpx;
				color: rgba(255, 255, 255, 0.87);

				.btn-l {
					width: 50%;
					height: 100%;
					border-right: 1rpx solid rgba(0, 0, 0, 0.12);
				}

				.btn-r {
					height: 100%;
					width: 50%;
				}
			}

		}

		.modal-img {
			position: absolute;
			left: -14rpx;
			display: block;
			width: 675rpx;
			height: 873rpx;
		}
	}
</style>